<!--菜单项-->
<template>
  <template v-for="menuItem in data" :key="menuItem.url">
    <a-sub-menu v-if="menuItem.children && menuItem.children.length > 0" :key="menuItem.name">
      <template #icon><BaseIcon :name="menuItem.icon" /></template>
      <template #title>{{ menuItem.name }}</template>
      <BaseMenuItem :data="menuItem.children" />
    </a-sub-menu>
    <a-menu-item v-else :key="menuItem.url">
      <template #icon>
        <BaseIcon :name="menuItem.icon" />
      </template>
      {{ menuItem.name }}</a-menu-item
    >
  </template>
</template>

<script lang="ts" setup>
import BaseIcon from '@/components/base/BaseIcon.js'
import { menu } from '../../../entity/system/menu'
import { defineProps } from 'vue'
const props = defineProps({
  data: Array<menu>,
})
</script>

<style scoped lang="scss"></style>
